<template>
  <a-modal
    title="密码修改"
    :visible="visible"
    :footer="null"
    @cancel="cancelHandel"
  >
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
      <a-form-model-item has-feedback label="原始密码" prop="ori_pass">
        <a-input v-model="ruleForm.ori_pass" type="password" autocomplete="off" />
      </a-form-model-item>

      <a-form-model-item has-feedback label="新密码" prop="pass">
        <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </a-form-model-item>

      <a-form-model-item has-feedback label="确认密码" prop="check_pass">
        <a-input v-model="ruleForm.check_pass" type="password" autocomplete="off" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="submitForm('ruleForm')">
          Submit
        </a-button>
        <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
          Reset
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import md5 from 'md5'
import { mapActions } from 'vuex'

export default {
  data () {
    const checkOriPass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('Please input the original password'))
      } else if (value.length < 6 || value.length > 8) {
        return callback(new Error('Must 6~8 char'))
      } else {
        callback()
      }
    }

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password'))
      } else if (value.length < 6 || value.length > 8) {
        return callback(new Error('Must 6~8 char'))
      } else {
        if (this.ruleForm.check_pass !== '') {
          this.$refs.ruleForm.validateField('check_pass')
        }
        callback()
      }
    }

    const validateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password again'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("Two inputs don't match!"))
      } else {
        callback()
      }
    }

    return {
      visible: false,
      regSymbol: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,8}$/,
      regLetter: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,8}$/,
      regDigit: /^(?=.*\d)[\d]{6,8}$/,
      ruleForm: {
        ori_pass: '',
        pass: '',
        check_pass: '',
        strength: 0
      },
      rules: {
        ori_pass: [{ validator: checkOriPass, trigger: 'change' }],
        pass: [{ validator: validatePass, trigger: 'change' }],
        check_pass: [{ validator: validateCheckPass, trigger: 'change' }]
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      }
    }
  },
  computed: {
  },
  methods: {
    ...mapActions(['ChangePass']),
    show () {
      this.visible = true
      setTimeout(() => {
        this.resetForm('ruleForm')
      }, 100)
    },
    cancelHandel () {
      this.visible = false
    },
    submitForm (formName) {
      const { ChangePass } = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          const formData = this.ruleForm
          const pass = formData['pass']
          // strength强度
          if (this.regSymbol.test(pass)) {
            formData.strength = 3
          } else if (this.regLetter.test(pass)) {
            formData.strength = 2
          } else if (this.regDigit.test(pass)) {
            formData.strength = 1
          } else {
            formData.strength = 0
          }
          const params = {
            'ori_pass': md5(formData['ori_pass']),
            'pass': md5(formData['pass']),
            'check_pass': md5(formData['check_pass']),
            'strength': formData['strength']
          }
          // handle
          ChangePass(params).then(res => {
            this.$message.success('修改成功!')
            this.cancelHandel()
          }).catch(err => {
            this.$message.error('修改失败～' + err.data)
          })
        } else {
          this.$message.error('请输入正确数据～')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
